<template>
	<article class="media">
		<div class="media-content">
			<form @submit.prevent="onSubmit">
				<!-- 评论输入框 -->
				<b-field class="mb-0">	
					<b-input
						v-model.lazy="commentText"
						type="textarea"
						maxlength="400"
						placeholder="留下你的评论吧"
						:disabled="isLoading"
					>
					</b-input>
				</b-field>
				<!-- 评论按钮 -->
				<nav class="level">
					<div class="level-left">
						<b-button
							class="level-item mb-3"
							type="is-primary"
							native-type="submit"
							:disabled="isLoading"
						>
							发送评论
						</b-button>
					</div>
				</nav>
			</form>
		</div>
	</article>
</template>

<script>
import { createComment, test } from '@/api/comment'

export default {
  	name: 'LvCommentsForm',

	props: {
		postId: {
			type: String,
			default: null
		}
	},

	data() {
		return {
			// 评论内容
			commentText: '',

			// 是否禁用评论区输入
			isLoading: false
		}
	},

	methods: {
		// 提交评论
		async onSubmit() {
			this.isLoading = true

			try {
				// 若提交空评论则会抛出异常
				if (this.commentText.length == 0)
					throw new Error('评论不能为空')
				
				// 封装 newComment 数据 (包括 postId 和 commentContent)
				let newComment = {}
				newComment['postId'] = this.postId
				newComment['commentContent'] = this.commentText
		
				// 发送 newComment 数据到后端
				let result = await createComment(newComment)
				// 若添加评论成功则显示留言成功
				if(result.code === 200) {
					// 向父组件 Comments 传回当前的 postId，通知父组件 Comments 重新加载评论列表
					this.$emit('load-comments', this.postId)
					return this.$message.success('添加评论成功')
				}		
			} catch (e) {
				// 若提交一个空评论会报错
				this.$buefy.toast.open({
					duration: 5000,
					message: `评论当前帖子出错， ${e.message}`,
					type: 'is-danger',	
				})
			} finally {
				this.isLoading = false
			}
		}
	}
}
</script>
